<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="my-ul"></ul>
    <script src="../js/axios.min.js"></script>
    <script>
        //     目标:掌握Promise的all方法作用，和使用场景
        //     业务:当我需要同一时间显示多个请求的结果时，就要把多请求合并
        //     例如: 默认显示"北京"，"上海"，“广州"，“深圳”的天气在首页查看
        // code:
        // 北京-110100
        // 上海-310100
        // 广州-440100
        // 深圳-440300

        // 1。请求城市天气，得到Promise对象
        const bjPromise = axios({
            url: 'http://hmajax.itheima.net/api/weather',
            params: {
                city: '110100'
            }
        })

        const shPromise = axios({
            url: 'http://hmajax.itheima.net/api/weather',
            params: {
                city: '310100'
            }
        })

        const gzPromise = axios({
            url: 'http://hmajax.itheima.net/api/weather',
            params: {
                city: '440100'
            }
        })

        const szPromise = axios({
            url: 'http://hmajax.itheima.net/api/weather',
            params: {
                city: '440300'
            }
        })


        // 2。使用Promise.all，合并多个Promise对象
        const p = Promise.all([bjPromise, shPromise, gzPromise, szPromise])
            // 注意: 结果数组顺序和合并时顺序是一致
        p.then(result => {
            // console.log(result)
            const htmlStr = result.map(item => {
                    return `<li>${item.data.data.area} --- ${item.data.data.weather}</li>`
                }).join('') //join('')数组转字符串

            document.querySelector('.my-ul').innerHTML = htmlStr
        }).catch(error => {
            console.dir(error)
        })
    </script>
</body>

</html>